<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记忆翻牌游戏</title>

    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="main">
        <div class="card-box">

           

            <div class="card flip" data-name="萝卜兔">
                <div class="front-face">
                    <img src="./萝卜兔.webp" alt="萝卜兔">
                </div>
                <div class="back-face">
                    <img src="./反面.webp" alt="logo">
                </div>
            </div>
            <div class="card flip" data-name="萝卜兔">
                <div class="front-face">
                    <img src="./萝卜兔.webp" alt="萝卜兔">
                </div>
                <div class="back-face">
                    <img src="./反面.webp" alt="logo">
                </div>
            </div>
            <div class="card flip" data-name="美女">
                <div class="front-face">
                    <img src="./美女.jpg" alt="美女">
                </div>
                <div class="back-face">
                    <img src="./反面.webp" alt="logo">
                </div>
            </div>
            <div class="card flip" data-name="美女">
                <div class="front-face">
                    <img src="./美女.jpg" alt="美女">
                </div>
                <div class="back-face">
                    <img src="./反面.webp" alt="logo">
                </div>
            </div>
            <div class="card flip" data-name="强森">
                <div class="front-face">
                    <img src="./强森.jpg" alt="强森">
                </div>
                <div class="back-face">
                    <img src="./反面.webp" alt="logo">
                </div>
            </div>
            <div class="card flip" data-name="强森">
                <div class="front-face">
                    <img src="./强森.jpg" alt="强森">
                </div>
                <div class="back-face">
                    <img src="./反面.webp" alt="logo">
                </div>
            </div>
            <div class="card flip" data-name="太阳神">
                <div class="front-face">
                    <img src="./太阳神.jpg" alt="太阳神">
                </div>
                <div class="back-face">
                    <img src="./反面.webp" alt="logo">
                </div>
            </div>
            <div class="card flip" data-name="太阳神">
                <div class="front-face">
                    <img src="./太阳神.jpg" alt="太阳神">
                </div>
                <div class="back-face">
                    <img src="./反面.webp" alt="logo">
                </div>
            </div>
            <div class="card flip" data-name="蜗牛">
                <div class="front-face">
                    <img src="./蜗牛.webp" alt="蜗牛">
                </div>
                <div class="back-face">
                    <img src="./反面.webp" alt="logo">
                </div>
            </div>
            <div class="card flip" data-name="蜗牛">
                <div class="front-face">
                    <img src="./蜗牛.webp" alt="蜗牛">
                </div>
                <div class="back-face">
                    <img src="./反面.webp" alt="logo">
                </div>
            </div>
            <div class="card flip" data-name="小鬼">
                <div class="front-face">
                    <img src="./小鬼.png" alt="小鬼">
                </div>
                <div class="back-face">
                    <img src="./反面.webp" alt="logo">
                </div>
            </div>
            <div class="card flip" data-name="小鬼">
                <div class="front-face">
                    <img src="./小鬼.png" alt="小鬼">
                </div>
                <div class="back-face">
                    <img src="./反面.webp" alt="logo">
                </div>
            </div>
            <div class="card flip" data-name="雪人巨人">
                <div class="front-face">
                    <img src="./雪人巨人.jpg" alt="雪人巨人">
                </div>
                <div class="back-face">
                    <img src="./反面.webp" alt="logo">
                </div>
            </div>
            <div class="card flip" data-name="雪人巨人">
                <div class="front-face">
                    <img src="./雪人巨人.jpg" alt="雪人巨人">
                </div>
                <div class="back-face">
                    <img src="./反面.webp" alt="logo">
                </div>
            </div>
            <div class="card flip" data-name="野鸡">
                <div class="front-face">
                    <img src="./野鸡.webp" alt="野鸡">
                </div>
                <div class="back-face">
                    <img src="./反面.webp" alt="logo">
                </div>
            </div>
            <div class="card flip" data-name="野鸡">
                <div class="front-face">
                    <img src="./野鸡.webp" alt="野鸡">
                </div>
                <div class="back-face">
                    <img src="./反面.webp" alt="logo">
                </div>
            </div>
        </div>

        <div class="options-bar">
            <p class="time">时间： <span id="time">00:00</span></p>
            <p class="info">你翻转了 <span id="count">0</span> 次卡片</p>
            <button class="start" id="start">开始游戏</button>
            <button class="reset" id="reset">重置游戏</button>
        </div>
    </div>
</body>

<script src="index.js"></script>

</html>